/*
* @Date: 2021/1/19
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import ReactDOM from 'react-dom';
import { Modal, Form, Input, Row, Col, message } from 'antd';

export default {
  display: 'block',
  props: [{
    key: 'align',
    type: 'select',
    options: ['top', 'row-middle', 'bottom'],
    label: '对齐方式',
  }, {
    key: 'gutter',
    type: 'number',
    label: '栅格间隔',
    default: '0',
  }, {
    key: 'justify',
    type: 'select',
    options: ['start', 'end', 'center', 'space-between', 'space-around'],
    label: '排列方式',
  }, {
    key: 'wrap',
    type: 'boolean',
    label: '自动换行',
  }],
  /**
   * children渲染函数
   * @param param 参数
   */
  childRender: (param, page) => {
    const { grid } = param;
    const children = grid.map(vo => {
      const componentId = XUE.getGuid();
      const reactDom = (
        <Col span={vo}>
          <div className="sortable view-item-box sub" id={componentId} data-component="Col">

          </div>
        </Col>
        );
      !window.form ? window.form = { [componentId]: reactDom } : window.form[componentId] = reactDom;
      return reactDom;
    });
    return (
      <React.Fragment>
        {
          children
        }
      </React.Fragment>
    )
  },
  childParamer: () => {
    return new Promise((resolve, reject) => {
      const div = document.createElement('div');
      document.getElementById('root').append(div);
      const modal = (
        <Modal
          title="栅格数量"
          visible
          closable
          onOk={() => {
            const gridArr = $('#grid').val().replace(/，/g, ',').split(',');
            let sum = 0;
            const grid = [];
            gridArr.forEach(vo => {
              sum += Number(vo.trim());
              grid.push(Number(vo.trim()));
            });
            if (sum !== 24) {
              message.error('请输入累和为24');
            } else {
              $('.ant-modal-root').parent().remove();
              resolve({ grid });
            }

          }}
          onCancel={() => {
            $('.ant-modal-root').parent().remove();
            reject(1);
          }}
        >
          <Form>
            <Form.Item
              label="栅格"
              name="grid"
              rules={[{ required: true, message: '请输入栅格数量' }]}
            >
              <Input placeholder="用,隔开,如:8,8,4,4"/>
            </Form.Item>
          </Form>
        </Modal>
      );
      ReactDOM.render(modal, div);
    });
  }
}
